<template>
  <div class="recommend" v-loading="loading">
    <Scroll>
      <Slider v-if="sliders.length > 0" :sliders="sliders" />
      <div v-show="!loading" class="list-title">热门推荐</div>
      <ul class="list-wrapper">
        <li v-for="s in recommendList" :key="s.id" @click="selectAlbum(s)">
          <img v-lazy="s.pic" alt="" />
          <div class="album-content">
            <h2 class="album-username">{{ s.username }}</h2>
            <div class="album-title">{{ s.title }}</div>
          </div>
        </li>
      </ul>
    </Scroll>
  </div>
  <router-view v-slot="{ Component }">
    <transition appear name="slide">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
import { getRecommend } from '@/api/recommend'
import Slider from '@/components/Base/Slider/Slider'
// import Scroll from '@/components/Base/Scroll/Scroll'
import Scroll from '@/components/Base/ScrollContainer'
import { setObj } from '@/assets/js/sessionStore'
export default {
  name: 'Recommend',
  components: {
    Slider,
    Scroll
  },
  data() {
    return {
      sliders: [],
      recommendList: []
    }
  },
  computed: {
    loading() {
      return !this.sliders.length && !this.recommendList.length
    }
  },
  mounted() {
    this.getRecommendApi()
  },

  methods: {
    async getRecommendApi() {
      const res = await getRecommend()
      if (res.code === 0) {
        this.sliders = res.result.sliders
        this.recommendList = res.result.albums
      }
    },

    // 点击专辑
    selectAlbum(s) {
      setObj('ALBUM', s)
      this.$router.push(`/recommend/${s.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend {
  height: 100%;
  .list-title {
    height: 65px;
    line-height: 65px;
    text-align: center;
    font-weight: bold;
    color: $color-button-little;
  }
  .list-wrapper {
    > li {
      display: flex;
      padding: 0 20px 0 20px;
      margin-bottom: 10px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
      }
      > .album-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 80px;
        padding-left: 15px;
        padding: 10px 20px 25px 0;
        margin-left: 20px;
        border-bottom: 1px solid $color-line;
        .album-username {
          font-weight: bold;
          font-size: 15px;
        }
        .album-title {
          font-size: 13px;
        }
      }
    }
    > li:last-child {
      .album-content {
        border-bottom: none;
      }
    }
  }
}
</style>
